<!--
 * @Description: 疫情历史数据
 * @Author: Ronda
 * @Date: 2020-06-19 17:27:48
 * @LastEditors: 宋鹏珲
 * @LastEditTime: 2021-07-15 15:13:01
-->
<style scoped>
.history{
  height: calc(100vh - 50px);
  overflow: auto;
}
   
        table td,
        table th {
        /* 设置边框为1px的宽度、实线、颜⾊为⿊灰⾊ */
        border: 1px solid rgb(85, 84, 84);
        /* 表格内边框合并 */
        border-collapse: collapse;
        width: 300px;
        text-align: center; 
        color: blanchedalmond;
        
        }
        
    .head{
      text-align: center;
      color: turquoise;
      background-color: black;
    }
    .area{
      background-color: black;
    }
    #container{
      width: 50%;
      height: calc((100vh - 50px) / 2 );
      background-color: black;
      float: left;
    }
     #modules{
      width: 50%;
      height: calc((100vh - 50px) / 2 );
      background-color: black;
      float: left;
      color: burlywood;
    }
</style>
<template>
  <div class="history">
    
    <div class="head">
      部分国家及城市疫情历史数据
    </div>
    <div id="container">
    </div>
    <div id="modules">
      
    </div>
    <div align="center" class="area">
      <table>
        <tbody>
          <tr>
            <th>城市</th>
            <th>确诊</th>
            <th>疑似</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
          <tr>
            <td>湖北</td>
            <td>67794</td>
            <td>0</td>
            <td>54278</td>
            <td>3085</td>
          </tr>
          <tr>
            <td>广东</td>
            <td>1357</td>
            <td>0</td>
            <td>1303</td>
            <td>8</td>
          </tr>
          <tr>
            <td>河南</td>
            <td>1273</td>
            <td>0</td>
            <td>1250</td>
            <td>22</td>
          </tr>
          <tr>
            <td>浙江</td>
            <td>1231</td>
            <td>0</td>
            <td>1211</td>
            <td>1</td>
          </tr>
          <tr>
            <td>湖南</td>
            <td>1018</td>
            <td>0</td>
            <td>1014</td>
            <td>4</td>
          </tr>
          <tr>
            <td>安徽</td>
            <td>990</td>
            <td>0</td>
            <td>984</td>
            <td>6</td>
          </tr>
          <tr>
            <td>江西</td>
            <td>935</td>
            <td>0</td>
            <td>934</td>
            <td>1</td>
          </tr>
          <tr>
            <td>山东</td>
            <td>760</td>
            <td>0</td>
            <td>741</td>
            <td>7</td>
          </tr>
          <tr>
            <td>江苏</td>
            <td>631</td>
            <td>0</td>
            <td>631</td>
            <td>0</td>
          </tr>
          <tr>
            <td>重庆</td>
            <td>576</td>
            <td>0</td>
            <td>570</td>
            <td>6</td>
          </tr>
          <tr>
            <td>四川</td>
            <td>539</td>
            <td>0</td>
            <td>515</td>
            <td>3</td>
          </tr>
          <tr>
            <td>黑龙江</td>
            <td>482</td>
            <td>0</td>
            <td>453</td>
            <td>13</td>
          </tr>
          <tr>
            <td>北京</td>
            <td>442</td>
            <td>0</td>
            <td>353</td>
            <td>8</td>
          </tr>
          <tr>
            <td>上海</td>
            <td>353</td>
            <td>0</td>
            <td>324</td>
            <td>3</td>
          </tr>
          <tr>
            <td>河北</td>
            <td>318</td>
            <td>0</td>
            <td>324</td>
            <td>3</td>
          </tr>
          <tr>
            <td>福建</td>
            <td>296</td>
            <td>0</td>
            <td>295</td>
            <td>1</td>
          </tr>
          <tr>
            <td>广西</td>
            <td>252</td>
            <td>0</td>
            <td>243</td>
            <td>2</td>
          </tr>
          <tr>
            <td>陕西</td>
            <td>245</td>
            <td>0</td>
            <td>232</td>
            <td>2</td>
          </tr>
          <tr>
            <td>云南</td>
            <td>174</td>
            <td>0</td>
            <td>172</td>
            <td>2</td>
          </tr>
          <tr>
            <td>海南</td>
            <td>168</td>
            <td>0</td>
            <td>160</td>
            <td>6</td>
          </tr>
          <tr>
            <td>贵州</td>
            <td>146</td>
            <td>0</td>
            <td>143</td>
            <td>2</td>
          </tr>
          <tr>
            <td>香港</td>
            <td>141</td>
            <td>0</td>
            <td>81</td>
            <td>4</td>
          </tr>
          <tr>
            <td>天津</td>
            <td>136</td>
            <td>0</td>
            <td>132</td>
            <td>3</td>
          </tr>
          <tr>
            <td>山西</td>
            <td>133</td>
            <td>0</td>
            <td>133</td>
            <td>0</td>
          </tr>
          <tr>
            <td>甘肃</td>
            <td>132</td>
            <td>0</td>
            <td>91</td>
            <td>2</td>
          </tr>
          <tr>
            <td>辽宁</td>
            <td>125</td>
            <td>0</td>
            <td>114</td>
            <td>1</td>
          </tr>
          <tr>
            <td>吉林</td>
            <td>93</td>
            <td>0</td>
            <td>91</td>
            <td>1</td>
          </tr>
          <tr>
            <td>新疆</td>
            <td>76</td>
            <td>0</td>
            <td>73</td>
            <td>3</td>
          </tr>
          <tr>
            <td>宁夏</td>
            <td>75</td>
            <td>0</td>
            <td>73</td>
            <td>0</td>
          </tr>
          <tr>
            <td>内蒙古</td>
            <td>75</td>
            <td>0</td>
            <td>71</td>
            <td>1</td>
          </tr>
          <tr>
            <td>台湾</td>
            <td>59</td>
            <td>0</td>
            <td>20</td>
            <td>1</td>
          </tr>
          <tr>
            <td>青海</td>
            <td>18</td>
            <td>0</td>
            <td>18</td>
            <td>0</td>
          </tr>
          <tr>
            <td>澳门</td>
            <td>10</td>
            <td>0</td>
            <td>10</td>
            <td>0</td>
          </tr>
          <tr>
            <td>西藏</td>
            <td>1</td>
            <td>0</td>
            <td>1</td>
            <td>0</td>
          </tr>
          
         
        </tbody>
      </table>
    </div>
    
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      page:true
    };
  },
  computed: {},
  methods: {
draw1(){
  var chartDom = document.getElementById('container');
var myChart = echarts.init(chartDom);
var option;

option = {
    legend: {
        top: 'bottom'
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [25, 125],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                {value: 60, name: '中国'},      
                {value: 45, name: '印度'},
                {value: 40, name: '美国'},
                {value: 25, name: '巴西'},
                {value: 21, name: '德国'},
                {value: 23, name: '日本'},
                {value: 22, name: '土耳其'},
                {value: 12, name: '意大利'}
            ]
        }
    ]
};

option && myChart.setOption(option);
},

draw2(){
  var chartDom1 = document.getElementById('modules');
var myChart1 = echarts.init(chartDom1);
var option1;

option1 = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['感染人数', '治愈人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['美国', '印度', '巴西', '俄罗斯', '法国', '世界人口(万)']
    },
    series: [
        {
            name: '感染人数',
            type: 'bar',
            data: [3484, 3098, 1920, 585, 582, 582]
        },
        {
            name: '治愈人数',
            type: 'bar',
            data: [2932, 3014, 1785, 525, 565, 536]
        }
    ]
};

option1 && myChart1.setOption(option1);
}
  },
  created() {},
  mounted() {
    this.draw1();
    this.draw2();
  },
  
};

</script>

